<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>客户页面4</title>
		<link rel="stylesheet" href="../js/plugins/layui-v2.4.5/layui/css/layui.css" />
		<link rel="stylesheet" href="../css/reset.css" />
		<link rel="stylesheet" href="../css/center5.css" />
		<link rel="stylesheet" href="../css/center.css" />
		<style>
		#jd-more{top:0}	

		</style>
	</head>
	<body>
		<div class="container layui-col-space10">
			<!--左部分-->
			<div class="layui-col-md3 left ">
				<div class="layui-col-sm12 " style="height: 285px;">
					<div class="layui-card layui-tab layui-tab-brief" lay-filter="msgTab" style="margin: 0;">
						<ul class="layui-tab-title">
							<li class="layui-this">重点工作<span class="layui-badge">1</span></li>
							<li>重大事件<span class="layui-badge">1</span></li>
						</ul>
						<div class="layui-tab-content">
							<!--重点工作列表-->
							<div class="layui-tab-item layui-show">
								<header class="list-header">
									<span class="" style="flex:2">工作内容</span>
									<span class="">级别</span>
									<span class="">截止时间</span>
									<span class="">已完成</span>
								</header>
								<div class="content-scroll">
									<ul class="list-content" id="key-work">
										<li><span class="" style="flex:2">国庆节期间工作总结</span>
											<span class="red"><i class="layui-icon layui-icon-rate-solid"></i><i class="layui-icon layui-icon-rate-solid"></i><i class="layui-icon layui-icon-rate-solid"></i></span>
											<span class="">2018.10.8</span><span class="">100%</span>
										</li>
									</ul>
								</div>
							</div>
							<!--重大事件列表-->
							<div class="layui-tab-item">
								<header class="list-header">
									<span class="" style="flex:2">事件内容</span>
									<span class="">级别</span>
									<span class="">截止时间</span>
									<span class="">已完成</span>
								</header>
								<div class="content-scroll">
									<ul class="list-content" id="milestone" >
										<li><span class="" style="flex:2">网络机房UPS主机故障</span>
											<span class="red"><i class="layui-icon layui-icon-rate-solid"></i><i class="layui-icon layui-icon-rate-solid"></i><i class="layui-icon layui-icon-rate-solid"></i></span>
											<span class="">2018.8.21</span><span class="">100%</span>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-col-sm12" style="height: 370px;margin-top: 15px;">
					<div class="layui-card">
						<div class="layui-card-header">值班情况</div>
						<div class="layui-card-body" style="overflow-y: auto;">
							<!-- <h3>信息中心</h3>
							<div class="layui-col-xs6" style="color: #999;line-height:30px;font-size:12px"><span>主管：</span><i class="layui-icon layui-icon-cellphone-fine"></i>8012</div>
							<div class="layui-col-xs6" style="color: #999;line-height:30px;font-size:12px"><span>网络主管：</span><i class="layui-icon layui-icon-cellphone-fine"></i>8012</div>
							<div class="layui-col-xs6" style="color: #999;line-height:30px;font-size:12px"><span>桌面主管：</span><i class="layui-icon layui-icon-cellphone-fine"></i>8012</div>
							<div class="layui-col-xs6" style="color: #999;line-height:30px;font-size:12px"><span>安全主管：</span><i class="layui-icon layui-icon-cellphone-fine"></i>8012</div>
							 --><div id="staff" style="height: 100%- 100x;"></div>
						</div>
					</div>
				</div>
			</div>
			<!--中间部分-->
			<div class="layui-col-md6 center " style="height:680px;">
				<div class="layui-col-sm12 ">
					<div class="layui-card">
						<div class="layui-card-header ">
							<strong>节点机房：</strong><cite>15个</cite>
							<strong>监控点位：</strong><cite>580个</cite>
							<strong>故障：</strong><cite>15</cite>
							<strong>未使用：</strong><cite>23个</cite>
							<!-- <a href="javascript:;" class="fr a_blue" id="jd-more">更多</a> -->
						</div>
						<div class="layui-card-body">
							<div id="allmap"></div>
							<div>
								<div class="layui-card layui-tab layui-tab-brief" lay-filter="msgTab" style="margin: 0;">
									<ul class="layui-tab-title">
										<li class="layui-this">第1-5批监控</li>
										<li>第6批监控</li>
										<li>第7批监控</li>
										<li>第8批监控</li>
									</ul>
									<div class="layui-tab-content">
										<!--重点工作列表-->
										<div class="layui-tab-item layui-show">
											<div class="layui-row mb15 layui-col-space10">
												<div class="layui-col-xs2" style="width: 25%;">
													<a href="javascript:;" class="backlog-body">
														<h3>点位数</h3>
														<p style="color: #32a7fe;"><cite>35</cite>个</p>
													</a>
												</div>
												<div class="layui-col-xs2" style="width: 25%;">
													<a href="javascript:;" class="backlog-body">
														<h3>在线</h3>
														<p style="color: #81d32f;"><cite>31</cite></p>
													</a>
												</div>
												<div class="layui-col-xs2" style="width: 25%;">
													<a href="javascript:;" class="backlog-body">
														<h3>维修</h3>
														<p style="color: #fe9f10;"><cite>3</cite>个</p>
													</a>
												</div>
												<div class="layui-col-xs2" style="width: 25%;">
													<a href="javascript:;" class="backlog-body">
														<h3>无法回复</h3>
														<p style="color: #fd4a1d;"><cite>1</cite>个</p>
													</a>
												</div>
												
											</div>
										</div>
										<!--重大事件列表-->
										<div class="layui-tab-item">
											<div class="layui-row mb15 layui-col-space10">
												<div class="layui-col-xs2" style="width: 25%;">
													<a href="javascript:;" class="backlog-body">
														<h3>点位数</h3>
														<p style="color: #32a7fe;"><cite>15</cite>个</p>
													</a>
												</div>
												<div class="layui-col-xs2" style="width: 25%;">
													<a href="javascript:;" class="backlog-body">
														<h3>在线</h3>
														<p style="color: #81d32f;"><cite>21</cite></p>
													</a>
												</div>
												<div class="layui-col-xs2" style="width: 25%;">
													<a href="javascript:;" class="backlog-body">
														<h3>维修</h3>
														<p style="color: #fe9f10;"><cite>5</cite>个</p>
													</a>
												</div>
												<div class="layui-col-xs2" style="width: 25%;">
													<a href="javascript:;" class="backlog-body">
														<h3>无法回复</h3>
														<p style="color: #fd4a1d;"><cite>2</cite>个</p>
													</a>
												</div>
												
											</div>
										</div>
										<div class="layui-tab-item">
											<div class="layui-row mb15 layui-col-space10">
												<div class="layui-col-xs2" style="width: 25%;">
													<a href="javascript:;" class="backlog-body">
														<h3>点位数</h3>
														<p style="color: #32a7fe;"><cite>25</cite>个</p>
													</a>
												</div>
												<div class="layui-col-xs2" style="width: 25%;">
													<a href="javascript:;" class="backlog-body">
														<h3>在线</h3>
														<p style="color: #81d32f;"><cite>21</cite></p>
													</a>
												</div>
												<div class="layui-col-xs2" style="width: 25%;">
													<a href="javascript:;" class="backlog-body">
														<h3>维修</h3>
														<p style="color: #fe9f10;"><cite>2</cite>个</p>
													</a>
												</div>
												<div class="layui-col-xs2" style="width: 25%;">
													<a href="javascript:;" class="backlog-body">
														<h3>无法回复</h3>
														<p style="color: #fd4a1d;"><cite>2</cite>个</p>
													</a>
												</div>
												
											</div>
										</div>
										<div class="layui-tab-item">
											<div class="layui-row mb15 layui-col-space10">
												<div class="layui-col-xs2" style="width: 25%;">
													<a href="javascript:;" class="backlog-body">
														<h3>点位数</h3>
														<p style="color: #32a7fe;"><cite>45</cite>个</p>
													</a>
												</div>
												<div class="layui-col-xs2" style="width: 25%;">
													<a href="javascript:;" class="backlog-body">
														<h3>在线</h3>
														<p style="color: #81d32f;"><cite>41</cite></p>
													</a>
												</div>
												<div class="layui-col-xs2" style="width: 25%;">
													<a href="javascript:;" class="backlog-body">
														<h3>维修</h3>
														<p style="color: #fe9f10;"><cite>4</cite>个</p>
													</a>
												</div>
												<div class="layui-col-xs2" style="width: 25%;">
													<a href="javascript:;" class="backlog-body">
														<h3>无法回复</h3>
														<p style="color: #fd4a1d;"><cite>5</cite>个</p>
													</a>
												</div>
												
											</div>
										</div>
									</div>
								</div>

							</div>
						</div>
					</div>
				</div>
			</div>
			<!--右边部分-->
			<div class="layui-col-md3 right ">
				<div class="layui-row layui-col-space10 login-container" style="height: 80px;">
					<div class="layui-col-xs6" >
						<a href="javascript:;" class="backlog-body" >
							<h3><i class="layui-icon layui-icon-website" ></i>OA登录</h3>
						</a>
					</div>
					<div class="layui-col-xs6">
						<a href="javascript:;" class="backlog-body">
							<h3><i class="layui-icon layui-icon-component"></i>监控登录</h3>
						</a>
					</div>
				</div>
				<div class="layui-card layui-tab layui-tab-brief" lay-filter="jfTab" style="height: 600px;margin-top:15px;position: relative;" id="jfTab">
						 <ul class="layui-tab-title">
							<li class="layui-this">网络机房</li>
							<li>服务器机房</li>
						  </ul>
						  <div class="layui-card-body layui-tab-content" style="overflow-y: auto;">
						  	<div class="layui-tab-item layui-show layui-col-space10">
						  		<div style="height: 50%;margin:0 auto;margin-bottom: 15px;">
						  			<div id="echart1" style="width: 243px;height: 270px;margin: 0 auto;"></div>
						  		</div>
						  		<div class="layui-col-xs6">
						  			<a href="javascript:;" class="backlog-body">
						  				<h3>设备总计</h3>
						  				<p><cite>43</cite>个</p>
						  			</a>
						  		</div>
						  		<div class="layui-col-xs6">
						  			<a href="javascript:;" class="backlog-body">
						  				<h3>交换机</h3>
						  				<p><cite>31</cite>台</p>
						  			</a>
						  		</div>
						  		<div class="layui-col-xs6">
						  			<a href="javascript:;" class="backlog-body">
						  				<h3>核心设备</h3>
						  				<p><cite>4</cite>台</p>
						  			</a>
						  		</div>
						  		<div class="layui-col-xs6">
						  			<a href="javascript:;" class="backlog-body">
						  				<h3>其他设备</h3>
						  				<p><cite>8</cite>台</p>
						  			</a>
						  		</div>
						  		<div class="layui-col-xs12" style="line-height: 30px;font-size: 14px;text-align:center">
						  			<a href="javascript:;" class="fl">
						  				<span>运行中：</span><cite>35</cite>
						  			</a>
						  			<a href="javascript:;" class="fl">
						  				<span>正常：</span><cite>31</cite>
						  			</a>
						  			<a href="javascript:;" class="fl">
						  				<span>维修中：</span><cite>3</cite>
						  			</a>
									<a href="javascript:;" class="fl">
										<span>未运行：</span><cite>8</cite>
									</a>
									<a href="javascript:;" class="fl">
										<span>报警：</span><cite>1</cite>
									</a>
								</div>
						  	</div>
						  	<div class="layui-tab-item layui-col-space10">
						  		<div style="height: 60%;">
						  			<div id="echart2" style="width:243px;height:270px;margin:0 auto"></div>
						  		</div>
						  		<div class="layui-col-xs6">
						  			<a href="javascript:;" class="backlog-body">
						  				<h3>设备总计</h3>
						  				<p><cite>55</cite>个</p>
						  			</a>
						  		</div>
						  		<div class="layui-col-xs6">
						  			<a href="javascript:;" class="backlog-body">
						  				<h3>交换机</h3>
						  				<p><cite>45</cite>台</p>
						  			</a>
						  		</div>
						  		<div class="layui-col-xs6">
						  			<a href="javascript:;" class="backlog-body">
						  				<h3>核心设备</h3>
						  				<p><cite>8</cite>台</p>
						  			</a>
						  		</div>
						  		<div class="layui-col-xs6">
						  			<a href="javascript:;" class="backlog-body">
						  				<h3>其他设备</h3>
						  				<p><cite>2</cite>台</p>
						  			</a>
						  		</div>
						  		<div class="layui-col-xs12" style="line-height: 30px;font-size: 14px;text-align:center">
						  			<a href="javascript:;" class="fl">
						  				<span>运行中：</span><cite>52</cite>
						  			</a>
						  			<a href="javascript:;" class="fl">
						  				<span>正常：</span><cite>51</cite>
						  			</a>
						  			<a href="javascript:;" class="fl">
						  				<span>维修中：</span><cite>0</cite>
						  			</a>
									<a href="javascript:;" class="fl">
										<span>未运行：</span><cite>3</cite>
									</a>
									<a href="javascript:;" class="fl">
										<span>报警：</span><cite>1</cite>
									</a>
								</div>
						  	</div>
						  </div>
						<a href="javascript:;" class="fr a_blue" id="jf-more">更多</a>
				</div>
				
			</div>
		</div>
		<script src="../js/jquery-3.3.1.min.js"></script>
		<script src="../js/plugins/layui-v2.4.5/layui/layui.js"></script>
		<script src="../js/common.js"></script>
		<!--地图-->
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=c6z10TxX9lNzVzPXz8BqTXPUmgES16KI"></script>
		<script src="../js/map.js"></script>
		<!--工值班情况-->
		<script src="../js/center.js"></script>
		<!--饼图-->
		<script src="../js/plugins/echarts.js"></script>
		<script src="../js/pieChart3.js"></script>
		<script>
			$(function(){
				/*在岗人员列表*/
				staffList();
				showPieChart(1);
				layui.use(['element','layer'], function(){
				  var element = layui.element,layer = layui.layer;
				  element.on('tab(jfTab)',function(d){
					showPieChart(d.index + 1);
				  })
				  //重点工作弹窗
				  $("#key-work li").on('click',function(){
					openLayer('key_work/keyWork_detail.html','重点工作','800px','400px');   
				  })
				  $("#milestone li").on('click',function(){
					openLayer('milestone/milestone_detail.html','重大事件','800px','400px');   
				  })
				  $("#jf-more").on('click',function(e){
					e.stopPropagation();
					openLayer('jifang/jifang_list.html','网络机房','1000px','500px');  
				  })
				 /* $("#jd-more").on('click',function(e){
						e.stopPropagation();
						openLayer('jifang/jd_jifang_list.html','节点机房','1000px','500px');  
				  }) */
				});
			})
			 
		</script>
	</body>
</html>
